<template>
  <div>
    <!-- 头部 -->
    <div class="header style2-top"
      :class="[ headerData.show_fx_upgrade ? 'style2-top2': '' ]"
      :style="{ backgroundImage:'url('+headerData.bgImg+')',backgroundSize: '100% auto'}">
      <div class="infoPanel">
        <div class="avatar-box fl">
          <div class="avatar j-render" :style="{ backgroundImage:'url('+headerData.userImg+')'}"></div>
          <div class="outer"></div>
        </div>
        <div class="userinfo fl">
          <p class="nickname clearfix">
            <span class="nickname-title fl" :class="dhsSalesawardRule && dhsSalesawardRule.is_top== 1 ?'nickname_star':''" v-if="headerData.nickname">{{ headerData.nickname }}</span>
            <span class="nickname-title fl fontAliBaba" v-else>{{ headerData.mobile }}</span>
            <span
              class="lit-spn bor fl"
              v-if="headerData.chaining_rank"
            >{{ headerData.chaining_rank }}</span>
          </p>

        </div>
        <div class="gotoMail"
              @click="Jump('letter')">
          <span class="num fontAliBaba">{{ getLetterCount(headerData.letterCount) }}</span>
        </div>
        <!-- TODO 小程序订货中心 代理中心 供应商中心不显示二维码 -->
        <template>
          <span class="myif-er j-showQrcode" @click="_show_qrcode()"></span>
        </template>
      </div>
      <div class="cover"></div>
    </div>
    <!-- 导航 -->
    <user-nav :memberData="memberData" :current="8"></user-nav>

    <div class="accountPanel-links">
      <div class="u-id-s2-actions-title" v-if="chaining_reward_show.length>0 || linkCommission.success_member_reward">已结算</div>
      <section class="accountPanel accountPanel-s2 clearfix">
        <div class="iner-bor2 iner-flex">
          <div class="item" v-if="isExistArray(chaining_reward_show,'1')"><i class="fontAliBaba">{{linkCommission.success_superior_commission}}</i>
            <p>{{linkCommission.name_chaining_commission_superior}}</p>
          </div>
          <div class="item" v-if="isExistArray(chaining_reward_show,'2')"><i class="fontAliBaba">{{linkCommission.success_top_commission}}</i>
            <p>{{linkCommission.name_chaining_commission_top}}</p>
          </div>
          <div class="item" v-if="isExistArray(chaining_reward_show,'3')"><i class="fontAliBaba">{{linkCommission.success_level_commission}}</i>
            <p>{{linkCommission.name_chaining_commission_level}}</p>
          </div>
          <div class="item" v-if="linkCommission.success_member_reward"><i class="fontAliBaba">{{linkCommission.success_member_reward}}</i>
            <p>营销费用</p>
          </div>
        </div>
      </section>
    </div>
    <div class="accountPanel-links" v-if="boss_frozen_commission">
      <div class="link-task">
        <div class="link-flex freeze" style="border:none">
          <div>已冻结收益</div>
          <div><span v-html="scaleGoodsPriceFn(boss_frozen_commission)"></span></div>
        </div>
      </div>
    </div>
    <div class="accountPanel-links" v-if="chaining_reward_show.length>0 || linkCommission.pre_member_reward">
      <div class="u-id-s2-actions-title">待结算</div>
      <section class="accountPanel accountPanel-s2 clearfix">
        <div class="iner-bor2 iner-flex">
          <div class="item" v-if="isExistArray(chaining_reward_show,'1')"><i class="fontAliBaba">{{linkCommission.pre_superior_commission}}</i>
            <p>{{linkCommission.name_chaining_commission_superior}}</p>
          </div>
          <div class="item" v-if="isExistArray(chaining_reward_show,'2')"><i class="fontAliBaba">{{linkCommission.pre_top_commission}}</i>
            <p>{{linkCommission.name_chaining_commission_top}}</p>
          </div>
          <div class="item" v-if="isExistArray(chaining_reward_show,'3')"><i class="fontAliBaba">{{linkCommission.pre_level_commission}}</i>
            <p>{{linkCommission.name_chaining_commission_level}}</p>
          </div>
          <div class="item" v-if="linkCommission.pre_member_reward"><i class="fontAliBaba">{{linkCommission.pre_member_reward}}</i>
            <p>营销费用</p>
          </div>
        </div>
      </section>
    </div>
    <div class="accountPanel-links" v-if="is_chaining_assess && (assess_data.boss_num_total > 0 || assess_data.order_num_total > 0)">
      <div class="link-task">
        <div class="link-flex freeze">
          <div>当前已冻结收益</div>
          <div><span v-html="scaleGoodsPriceFn(assess_data.frozen_commission)"></span></div>
        </div>
        <div class="task-title">任务完成情况</div>
        <div class="link-flex task-list"  v-if="assess_data.boss_num_total > 0">
          <div>划走的下级是否升级</div>
          <div><span class="num_dec">{{assess_data.boss_num_completed}}</span>/{{assess_data.boss_num_total}}</div>
        </div>
        <div class="link-flex task-list" v-if="assess_data.order_num_total > 0">
          <div>{{assess_data.order_num_dec}}</div>
          <div><span class="num_dec">{{assess_data.order_num_completed}}</span>/{{assess_data.order_num_total}}</div>
        </div>
      </div>
    </div>
    <div class="accountPanel-links">
      <div class="recently-data">
        <div class="recently-title" style="margin-bottom: 0">成员管理</div>
        <section class="accountPanel accountPanel-s2 clearfix">
          <div class="iner-bor2 iner-flex">
            <div class="item" @click="JumpRank('name_chaining_direct_num')"><i class="fontAliBaba">{{chaining_direct.direct_num}}</i>
              <p>{{chaining_direct.name_chaining_direct_num}}</p>
            </div>
            <div class="item" @click="Jump('nextLevelVender',{type:'2', link: linkInfo.rank})"><i class="fontAliBaba">{{chaining_direct.level_num}}</i>
              <p>{{chaining_direct.name_chaining_level_num}}</p>
            </div>
            <div class="item" @click="JumpRank('name_chaining_group_num')"><i class="fontAliBaba">{{chaining_direct.group_num}}</i>
              <p>{{chaining_direct.name_chaining_group_num}}</p>
            </div>
          </div>
      </section>
      </div>
    </div>
    <div class="accountPanel-links">
      <div class="recently-data">
        <div class="recently-title">近日数据</div>
        <div class="recently-btn">
          <div :class="recently_now.time == 'today' ? 'active': ''" @click="recentlyBtn('today')">今日</div>
          <div :class="recently_now.time == 'yesterday' ? 'active': ''" @click="recentlyBtn('yesterday')">昨日</div>
          <div :class="recently_now.time == 'week' ? 'active': ''" @click="recentlyBtn('week')">近7日</div>
          <div :class="recently_now.time == 'month' ? 'active': ''" @click="recentlyBtn('month')">本月</div>
          <div :class="recently_now.time == 'year' ? 'active': ''" @click="recentlyBtn('year')">本年</div>
        </div>
      <section class="accountPanel accountPanel-s2 clearfix">
        <div class="iner-bor2 col2">
          <div class="item fl"><i class="fontAliBaba">{{recently_now.amount}}</i>
            <p style="position:relative" @click="showIconDesc()">团队业绩(元)<img class="icon_tip" src="https://img.wifenxiao.com/h5-wfx/images/public/icon_tip.png" /></p>
          </div>
          <div class="item fl"><i class="fontAliBaba">{{recently_now.num}}</i>
            <p>团队订单(笔)</p>
          </div>
        </div>
      </section>
      </div>
    </div>
    <van-popup v-model="showDesc" class="showDescClass">{{recently_desc}}</van-popup>
    <!-- 我的服务 -->
    <div class="mainmodule" v-if="template_style == 1" >
      <div class="mainlist">
        <ul>
          <li>
            <div class="icon_link_member" @click="Jump('nextLevelVender',{type:'1', link: linkInfo.rank})">
              {{linkInfo.name_chaining_member}}
              <i class="icon-right"></i>
            </div>
          </li>
          <li>
            <div class="icon_link_order" @click="Jump('venderOrder',{type:'1', link: linkInfo.rank})">
              {{linkInfo.name_chaining_order}}
              <i class="icon-right"></i>
            </div>
          </li>
          <li>
            <div @click="Jump('myCommission')" class="icon_link_income">
              {{linkInfo.name_chaining_commission}}
              <i class="icon-right"></i>
            </div>
          </li>
          <li>
            <div class="icon_link_product" @click="handleLinkTo('item-list', {link: 1})">
              {{linkInfo.name_chaining_product}}<i class="icon-right"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="style2-actions clearfix mgt10" v-else-if="template_style == 2">
      <div class="style2-actions-title">我的服务</div>
      <div class="action" @click="Jump('nextLevelVender',{type:'1', link: linkInfo.rank})">
        <span class="icon-action icon_link_member"></span>
        <span class="title">{{linkInfo.name_chaining_member}}</span>
      </div>
      <div class="action" @click="Jump('venderOrder',{type:'1', link: linkInfo.rank})">
        <span class="icon-action icon_link_order"></span>
        <span class="title">{{linkInfo.name_chaining_order}}</span>
      </div>
      <div @click="Jump('myCommission')" class="action">
        <span class="icon-action icon_link_income"></span>
        <span class="title">{{linkInfo.name_chaining_commission}}</span>
      </div>
      <div class="action" @click="handleLinkTo('item-list', {link: 1})">
        <span class="icon-action icon_link_product"></span>
        <span class="title">{{linkInfo.name_chaining_product}}</span>
      </div>
    </div>

    <van-popup v-model="is_show_qrcode" class="code-pop">
      <img :src="qrcode_url" alt @longpress="saveCodeImage(qrcode_url)"/>
    </van-popup>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import userNav from '@/views/user/components/nav/index'
import { chainingIndex, chainingStatistic } from '@/api/user/link/index'
import small from '@/smallapp/small'
import { Popup } from 'vant'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import { scaleGoodsPrice } from '@/utils/index'
import { openPage } from '@/utils/utils'

Vue.use(Popup)
export default Vue.extend({
  components: {
    userNav,
    SmallLogin
  },
  data() {
    return {
      template_style: 1,
      memberData: {},
      linkCommission: {
        pre_level_commission: 0,
        pre_superior_commission: 0,
        pre_top_commission: 0,
        success_level_commission: 0,
        success_superior_commission: 0,
        success_top_commission: 0,
        name_chaining_commission_level: '',
        name_chaining_commission_superior: '',
        name_chaining_commission_top: '',
        pre_member_reward: false,
        success_member_reward: false
      },
      // 头部数据
      headerData: {
        bgImg: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
        userImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
        nickname: '',
        mobile: '',
        show_level: true,
        rank_name: '',
        end_time: '',
        letterCount: 0,
        show_qrcode: true
      },
      dhs_salesaward_rule: {},

      linkInfo: {
        name_chaining_commission: '',
        name_chaining_order: '',
        name_chaining_member: '',
        name_chaining_product: '',
        rank: 0
      },

      qrcode_url: '',
      is_show_qrcode: false,
      is_chaining_assess: 0, // 是否显示帮扶
      dz_boss_frozen: 0, // 定制冻结
      boss_frozen_commission: 0,
      assess_data: {
        frozen_commission: '', // 冻结佣金
        boss_num_completed: '', // 已完成人数
        order_num_completed: '', // 已完成订单数
        boss_num_total: '', // 总人数
        order_num_total: '', // 总订单数
        order_num_dec: '' // 文案
      },
      recently_data: [],
      recently_now: {
        amount: 0,
        num: 0,
        time: 'today'
      },
      recently_desc: '',
      showDesc: false,
      chaining_reward_show: [],
      chaining_direct: {}
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  created() {
    this.init()
  },
  mounted() {
    this.loginTo
  },
  methods: {
    showIconDesc() {
      this.showDesc = true
    },
    loginTo () {
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      }
    },
    statistic() {
      this.$loadingWrap.show()
      chainingStatistic().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.recently_data = res.data.list
          this.recently_now = this.recently_data[0]
          this.recently_desc = res.data.desc
          this.chaining_direct = {
            'direct_num': res.data.direct_num,
            'group_num': res.data.group_num,
            'level_num': res.data.level_num,
            'name_chaining_direct_num': res.data.name_chaining_direct_num,
            'name_chaining_group_num': res.data.name_chaining_group_num,
            'name_chaining_level_num': res.data.name_chaining_level_num
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 判断数组是否存在某值
    isExistArray(array, val) {
      if (!array) return false
      const ret = array.indexOf(val)
      if (ret == -1) {
        return false
      } else {
        return true
      }
    },
    init() {
      this.$loadingWrap.show()
      chainingIndex().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          // TODO 小程序处理 wxConfig.template_style
            resData.template_style ? this.template_style = resData.template_style : ''
            wx.setNavigationBarTitle({
              title: res.data.name_chaining_center
            })
          // 导航数据
          this.memberData = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          this.memberData.user_type = resData.user_identity.user_type
          this.memberData.is_agent = resData.user_identity.is_agent
          this.memberData.is_show_distributor = resData.is_show_distributor
          this.memberData.system_function_model = resData.system_function_model
          this.memberData.is_check_dhs = resData.is_check_dhs
          this.memberData.is_show_dhs = resData.is_show_dhs
          this.memberData.is_wx = resData.is_wx
          this.memberData.is_app = resData.is_app
          this.memberData.is_show_agent = resData.is_show_agent
          this.memberData.is_show_gys = resData.is_show_gys
          this.memberData.supplier_flag = resData.supplier_flag
          this.memberData.is_tgy = resData.is_tgy
          this.memberData.is_dls = resData.is_dls
          this.memberData.ftitle_gys_center = resData.ftitle_gys_center
          this.memberData.is_show_chaining = resData.is_show_chaining
          this.memberData.is_chaining = resData.is_chaining
          this.memberData.name_chaining_center = resData.name_chaining_center || '链动中心'
          this.headerData.chaining_rank = resData.chaining_rank
          // 复制中心 start
          this.memberData.has_replicate_rank = resData.has_replicate_rank || 0
          this.memberData.is_show_replicate_center = resData.is_show_replicate_center
          // 复制中心 end
          //  头部数据打包
          if (resData.common_center_renovation_parameter.top_bg != '') {
            this.headerData.bgImg = resData.common_center_renovation_parameter.top_bg
          }
          this.chaining_reward_show = resData.chaining_reward_show
          this.headerData.userImg = resData.common_center_parameter.avatar
          this.headerData.nickname = resData.nickname
          // console.log('this.headerData', this.headerData)
          this.qrcode_url = resData.qrcode_url
          // 已结算，未结算
          this.linkCommission.pre_level_commission = resData.pre_level_commission
          this.linkCommission.pre_superior_commission = resData.pre_superior_commission
          this.linkCommission.pre_top_commission = resData.pre_top_commission
          this.linkCommission.success_level_commission = resData.success_level_commission
          this.linkCommission.success_superior_commission = resData.success_superior_commission
          this.linkCommission.success_top_commission = resData.success_top_commission
          this.linkCommission.name_chaining_commission_level = resData.name_chaining_commission_level // 平级别名
          this.linkCommission.name_chaining_commission_superior = resData.name_chaining_commission_superior // 直推别名
          this.linkCommission.name_chaining_commission_top = resData.name_chaining_commission_top // 见点别名
          this.linkCommission.pre_member_reward = resData.pre_member_reward || false
          this.linkCommission.success_member_reward = resData.success_member_reward || false
          // 图标
          this.linkInfo.name_chaining_commission = resData.name_chaining_commission
          this.linkInfo.name_chaining_order = resData.name_chaining_order
          this.linkInfo.name_chaining_member = resData.name_chaining_member
          this.linkInfo.name_chaining_product = resData.name_chaining_product
          this.linkInfo.rank = resData.rank
          // 是否显示帮扶
          this.is_chaining_assess = resData.is_chaining_assess
          // 定制 是否显示冻结
          this.boss_frozen_commission = resData.boss_frozen_commission || 0
          this.assess_data = resData.assess_data
          this.statistic()
        } else {
          if (res.msg != '暂时还不能访问哦') {
            this.$Error(res.msg)
          }
          if (res.data.redirect_url) {
            // setTimeout(() => {
              // wx.navigateBack({
              //   delta: 1 // 返回的页面层级，默认为1，表示返回上一页
              // });
              openPage(res.data.redirect_url)
            // }, 1000)
          }
        }
      })
    },
    recentlyBtn(data) {
      const newData = this.recently_data.filter(item => item.time == data)
      // console.log('recently_data', data, this.recently_data)
      // console.log('data', this.recently_data.filter(item => item.time == data))
      // console.log('newData', newData)
      if (newData.length > 0) {
        this.recently_now = newData[0]
      } else {
        this.recently_now = {
          amount: 0,
          num: 0,
          time: data
        }

      }
    },
    getLetterCount(num) {
      const mailNum = parseInt(num)
      return mailNum > 99 ? '99+' : num <= 0 ? '' : num
    },
    // 展示二维码
    _show_qrcode() {
      this.is_show_qrcode = !this.is_show_qrcode
    },
    saveCodeImage(url) {
      small.saveImage(url)
    },
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    JumpRank(name) {
      if (this.linkInfo.rank == 1) {
        this.$JumpPath(this, 'nextLevelVender',{ type:'2', link: this.linkInfo.rank })
      } else {
        if (name == 'name_chaining_direct_num') {
          this.$JumpPath(this, 'nextLevelVender',{ type:'1', link: this.linkInfo.rank, is_only_direct: 1 })
        } else if (name == 'name_chaining_group_num') {
          this.$JumpPath(this, 'nextLevelVender',{ type:'1', link: this.linkInfo.rank })
        }
      }
    },
    handleLinkTo(url, data) {
      this.$JumpName(this, url, data)
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/user/index.scss";
.accountPanel-links {
  .accountPanel {
    .iner-bor {
      border: none;
      &.width{
        .item {
          width: 26.3%;
        }
      }
    }
  }
  .u-id-s2-actions-title{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    border-bottom: 1px solid #EDEDED;
  }
}

// 头部
.header.style2-top{
  position: relative;
  min-height: 270px;
  &.style2-top2{
    padding-bottom: 140px !important;
  }
  .infoPanel .userinfo{
    height: 171px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    p{
      width: 100%;
      margin-top: 15px;
      line-height: 40px;
      img{
        vertical-align: -5px;
        height: 30px;
      }
      .nickname-title{
        // width: 400px;
        font-size: 36px;
        font-weight: bold;
        @include showEllipsis;
        &.nickname_star{
          color: #ffdb70;
          font-weight: bold;
        }
      }
      &.nickname_star{
        color: #ffdb70;
        font-weight: bold;
      }
      .bor{
        color:#fff;
        background:rgba(0,0,0,.15);
        // margin-left: 20px;
      }
      &:first-child{
        margin-top: 0;
      }
    }
  }
  .cover{
    position: absolute;
    z-index: 9;
    bottom: -2px;
    width: 750px;
    height: 18px;
    background: url("https://img.wifenxiao.com/h5-wfx/images/user/member/user_bg_bottom_cover.png") center/100% 100% no-repeat;
  }
}
.link-task {
  padding: 0 32px;
  .freeze {
    border-bottom: 1px solid #EDEDED;
    padding: 24px 0;
    font-size: 32px;
    .price-scale{
			font: size 32px!important;;
			.num-font{
				font-size: 48px!important;
			}
		}
  }
  .task-title {
    font-weight: 500;
    font-size: 32px;
    padding: 32px 0;
  }
  .task-list {
    color: #999;
    padding-bottom: 32px;
    font-size: 28px;
  }
}
.link-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.num_dec {
  color:#f30c23
}
.recently-data {
    padding-top: 20px;
  .recently-title {
    font-size: 30px;
    border-left: 8px solid #F30C23;
    margin: 0 0 20px 20px;
    padding-left: 20px;
    font-weight: bold;
  }
  .recently-btn {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 0 24px 0;
    border-bottom: 2px solid #EDEDED;
    div {
      width: 110px;
      background-color: #f2f2f2;
      border-radius: 110px;
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      padding: 10px 0;
      border: 1px solid #f2f2f2;
      overflow: hidden;
      &.active {
        border-color: #F30C23;
        color: #F30C23;
        background-color:#ffebe7
      }
    }
  }
}
.icon_tip {
  width: 24px!important;
  height: 24px!important;
  margin-left: 10px;
  // position: relative;
  // top: 4px;
  position: absolute;
  top: 0;
}
.showDescClass {
  width: 90%;
  padding: 40px 20px;
  border-radius: 10px;
}
.iner-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

</style>
